<template>
  <div class="the-best-ai-websites bg-purple-2400 py-20 px-4">
    <div class="max-w-15xl mx-auto sm:px-5">
      <div class="text-center text-4xl text-black font-bold tracking-tight sm:text-4xl lg:text-5xl">
        {{$t('aitools_theBestAIWebsites')}}
      </div>
      <div class="mt-10 flex justify-center items-center gap-y-5 gap-x-16 flex-wrap">
        <div class="flex justify-center items-center max-w-250">
          <svg-icon className="w-9 h-9 group-hover:hidden"
            iconName='target'></svg-icon>
          <span class="block ml-3 text-black text-lg">
            {{$t('aitools_AIToolsList')}}
          </span>
        </div>
        <div class="flex justify-center items-center max-w-250">
          <svg-icon className="w-9 h-9 group-hover:hidden"
            iconName='target'></svg-icon>
          <span class="block ml-3 text-black text-lg">
            {{$t('aitools_AIWebsitesList')}}
          </span>
        </div>
        <div class="flex justify-center items-center max-w-250">
          <svg-icon className="w-9 h-9 group-hover:hidden"
            iconName='target'></svg-icon>
          <span class="block ml-3 text-black text-lg">
            {{$t('aitools_GPTsStore')}}
          </span>
        </div>
      </div>
      <div class="mt-9 text-center">
        <common-link path="/"
          class="flex sm:inline-flex items-center justify-center mx-auto bg-purple-2300 hover:bg-purple-1300 rounded-md text-lg h-17 px-4 sm:px-6 bg-slate-900 text-white hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:bg-purple-2300 focus:ring-purple-2300 nowrap min-w-80 max-w-full">
          <span>{{$t('aitools_pickYourAItools')}}</span>
        </common-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TheBestAiWebsites',
}
</script>
